<template>
  <div>
    <div class="carousel">
      <el-carousel height="285px">
        <el-carousel-item v-for="item,index in carousels"
                          :interval="5000"
                          :key="index">
          <img :src="item"
               alt=""
               class="r-img">
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="banxin2">
      <!-- 左边展示栏 -->
      <div class="r-left">
        <!-- 热门推荐 -->
        <div class="r-l-box">
          <ul class="r-l-title">
            <section>热门推荐</section>
            <li v-for="item in hotBar"
                :key="item.id"
                @click="$router.push({path:'/playList',query:{cat:item.name}})">{{ item.name }}</li>
            <li class="more"
                @click="$router.push({path:'/playList'})">更多</li>
          </ul>
          <div class="list">
            <SongCard v-for="item in hotList"
                      :key="item.id"
                      :Song="item"></SongCard>
          </div>
        </div>

      </div>
      <!-- 右边用户信息 -->
      <div class="r-right">
        <User></User>
        <Singer></Singer>
      </div>
    </div>
  </div>
</template>

<script>
import { playList_hot, playList_hot_bar } from '@/assets/js/request'
import Singer from '@/components/Singer.vue'
import SongCard from '@/components/SongCard.vue'
import User from '@/components/User.vue'
export default {
  components: {
    SongCard,
    User,
    Singer,
  },
  data() {
    return {
      //轮播图
      carousels: [
        require('../assets/image/1.jpg'),
        require('../assets/image/2.jpg'),
        require('../assets/image/3.jpg'),
        require('../assets/image/4.jpg'),
      ],
      //热门导航栏
      hotBar: [{ id: 0, name: 'asdas', category: 0, activity: false }],
      //热门歌单
      hotList: [{ id: 0, name: '', playCount: 0, coverImgUrl: '' }],
    }
  },
  created() {
    playList_hot_bar().then((res) => {
      const arry = []
      res.tags.map((item, index) => {
        if (index > 6) return
        let { id, name, category, activity } = item
        arry.push({ id, name, category, activity })
        this.hotBar = arry
      })
    })
    playList_hot({ limit: 8, order: 'hot' }).then((res) => {
      if (res.code == 200) {
        let arry = []
        res.playlists.forEach((item) => {
          let { id, name, playCount, coverImgUrl } = item
          arry.push({ id, name, playCount, coverImgUrl })
        })
        this.hotList = arry
      }
    })
  },
  methods: {},
}
</script>

<style lang="less" scoped>
@import '@/assets/css/base.less';
.carousel {
  .r-img {
    width: 730px;
  }
}
.banxin2 {
  .r-left {
    width: 729px;
    padding: 20px 20px 40px;
    box-sizing: border-box;
    display: inline-block;
    vertical-align: top;
    .r-l-box {
      width: 100%;
      .r-l-title {
        width: 689px;
        padding: 0 10px 0 34px;
        text-align: left;
        background: url(../assets/image/index.png) no-repeat 0 9999px;
        background-position: -225px -156px;
        border-bottom: 2px solid #c10d0c;
        height: 33px;
        margin-bottom: 20px;
        box-sizing: border-box;
        section {
          display: inline-block;
          font-size: 20px;
          font-weight: normal;
          line-height: 28px;
        }
        li {
          display: inline-block;
          color: #666;
          font-size: 12px;
          cursor: pointer;
          padding: 0 10px;
          border-right: 1.5px solid #ccc;
          &:nth-last-of-type(1),
          &:nth-last-of-type(2) {
            border-right: none;
          }
        }
        .more {
          float: right;
          margin-top: 10px;
          background: url(../assets/image/index.png) no-repeat 0 9999px;
          background-position: 33px -240px;
        }
      }
      .list {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        column-gap: 43px;
        row-gap: 20px;
      }
    }
  }
  .r-right {
    display: inline-block;
  }
}
</style>